<template>
  <Button :style="[btnStyle]" :disabled="disabled" :type="type" @click="onClick" :ghost="ghost">
    <slot></slot>
  </Button>
</template>

<script>
export default {
  name: "cus-button",
  props: {
    type: {
      type: String,
      default: null
    },
    size: {
      type: String,
      default: 'small'
    },
    ghost: {
      type: Boolean,
      default: false,
    },
    shape: {
      type: String,
      default: 'default'
    },
    cusStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    btnStyle() {
      let style = {
        transition: 'all .1s',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '16px',
        padding: '0 16px',
        fontFamily: "PingFangSC-Regular, PingFang SC",
        // borderRadius: '2px',
        cursor: 'pointer',
      };
      if (this.shape == 'circle') style.borderRadius = '34px';
      style = Object.assign(style, this.cusStyle);
      if (this.size == 'default') {
        style.height = '40px';
      } else if (this.size == 'small') {
        style.height = '32px';
        style.fontSize = '12px';
      }
      return style;
    }
  },
  methods: {
    onClick() {
      this.$cu.throttle(() => {
        this.$emit('onClick');
      })

    }
  }
}
</script>

<style scoped lang="less"></style>
